<template>
  <div>
    <e-upload
      :show-upload-list="false"
      :on-success="handleSuccess"
      :on-exceeded-size="handleMaxSize"
      :on-format-error="handleFormatError"
      :before-upload="handleBeforeUpload"
      :on-error="onError"
      :on-progress="onProgress"
      :on-preview="onPreview"
      :disabled="disabled"
      :onCloseSelectFileWindow="onCloseSelectFileWindow"
      ref="upload"
      multiple
      :data="{ a: 1 }"
      withCredentials
      :format="['jpg', 'jpeg', 'png']"
      :max-size="2048"
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      class="demo-upload-button"
    >
      <div class="inner" :style="styles" v-if="isSuccess == -1" @click="isActive = !disabled" :class="{ 'is-active': isActive }">
        <e-icon size="17" type="add"></e-icon>
        上传
      </div>

      <div v-else-if="isSuccess == 1" class="inner" :style="loadSuccessbg">
        <div class="demo-upload-list-cover">
          <e-icon
            type="display"
            size="20"
            @click="handleView($event)"
            class="close-round-icon"
          >
          </e-icon>
          <e-icon
            class="close-round-icon"
            type="delete"
            size="20"
            @click.enter="handleRemove($event)"
          >
          </e-icon>
        </div>
      </div>
      <div v-if="isSuccess == 0" class="inner" :style="styles">
        <e-icon
          size="20"
          type="a-Imagedamage"
          class="load-error-icon"
          color="red"
        ></e-icon>
        <div style="color: red">加载失败</div>
      </div>
    </e-upload>
    <e-image-preview v-model="visible" :preview-list="[loadUrl]" />
  </div>
  <e-button @click=toToggleDisable>
    Toggle Disable
  </e-button>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
const visible = ref(false)
let uploadList = ref([])
let currentInstance = ''
let imageId = ref()
let isSuccess = ref(-1)
let loadSuccessbg = ref()
let loadFile = ref()
let loadUrl = ref

const styles = ref()
const isActive = ref(false)
const disabled = ref(false);

const onCloseSelectFileWindow = () => {
  console.log(1111)
  isActive.value = false
}

const toToggleDisable = () => {
  disabled.value = !disabled.value
}

onMounted(() => {
  currentInstance = getCurrentInstance()
  uploadList.value = currentInstance.ctx.$refs.upload.fileList
})

const handleView = (e) => {
  // imageId.value=item.name
  e.stopPropagation()

  visible.value = true
}

const onPreview = (file) => {
  console.log('onpreview', file)
}

const handleRemove = (e) => {
  e.stopPropagation()
  isSuccess.value = -1
}
const handleSuccess = (res, file) => {
  console.log('file', file)
  console.log('res', res)
  file.url = 'https://picsum.photos/id/74/800'

  loadFile.value = file
  loadUrl = file.url
  isSuccess.value = 1
  loadSuccessbg.value = `
    background:url(${file.url});
    background-size:contain;
  `
}
const handleMaxSize = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File${file.name}' is too large, no more than 2M.`,
    duration: 1.5,
  })
}
const handleFormatError = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File format of ${file.name}is incorrect, please select jpg or png.`,
    duration: 1.5,
  })
}
const handleBeforeUpload = () => {
  const check = uploadList.value.length < 5
  if (!check) {
    currentInstance.proxy.$Message.warning({
      content: 'Up to five pictures can be uploaded.',
      duration: 1.5,
    })
  }
  return check
}

const onError = (err, file, fileList) => {
  styles.value = `
    // background:url(${'https://picsum.photos/id/73/800'});
    background-size:contain;
    border-radius:2px;
    border:1px dashed #F04134;
  `
  isSuccess.value = 0
  console.log('onError', err, file, fileList)
}

const onProgress = (e, file, fileList) => {
  console.log('progress', e, file, fileList)
}
</script>

<style scoped lang="less">
.demo-upload-button {
 
  width: 100px;
  height: 100px;
}


.close-round-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  color: #999999;
  cursor: pointer;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.inner:hover .demo-upload-list-cover {
  display: block;
  cursor: pointer;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 -15px;
  padding: 0 10px;
}
.demo-upload-list-cover i + i {
  margin: 0 15px;
}

:deep(.haloe-upload) {
  color: #555555;

  .inner {
    display: flex;
    height: 100px;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.02);
    background-size: contain;
  }

  .haloe-upload-hover-border-color {
    .is-active {
      background-color: #E8F0FF;
    }
    &:hover {

      .inner {
        color: #1A6AFF;
      } 
    }
  }
}

:deep(.haloe-upload-disbaled) {

.uploadtext {
  color: #9D9EA9;

  a,
  p {
    color: #9D9EA9;
  }
}

.inner {
  color: #9D9EA9 !important;
}

.inner:hover {
  color: #9D9EA9 !important;
}

}

</style>
